<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>
      html, body {
        background-color: #f8f8f8;
      }
    </style>
  </head>
  <body>
    <h1>El Grapho One Cluster</h1>
    <div id="container"></div>
    <script src="../engine/dist/ElGrapho.js"></script>
    <script>
      // for debugging
      //ElGrapho.Profiler.enabled = true;

const NUM_NODES = 100;

let model = {
  nodes: [],
  edges: []
};

for (let n=0; n<NUM_NODES; n++) {
  model.nodes.push({
    group: 0
  });
  model.edges.push({
    from: Math.floor(Math.random() * (NUM_NODES-1)),
    to: Math.floor(Math.random() * (NUM_NODES-1))
  });
}

let graph = new ElGrapho({
  container: document.getElementById('container'),
  model: ElGrapho.layouts.Cluster(model),
  width: 1000,
  height: 500
});

    </script>
  </body>
</html>